import "./home.less";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import avactive from "@/assets/images/home/xiaolang.png";
import subject1 from "@/assets/images/home/books.png";
import subject2 from "@/assets/images/home/examination.png";
import subject3 from "@/assets/images/home/practice.png";
import List from "./components/List/List";

import { useEffect, useState } from "react";
import { HomeApi } from "@/api/index";

export default function Home() {
  const [title, setTitle] = useState("");
  const [study, setStudy] = useState(0);
  const [total, setTotal] = useState(0);
  const [wrong, setWrong] = useState(0);
  const [collect, setCollect] = useState(0);
  const [list, setList] = useState<IExam[]>([]);

  useEffect(() => {
    HomeApi().then((res) => {
      console.log(res);
      if (res.errCode === 0) {
        let data: IHomeDate = res.data;
        setTitle(data.exam.title);
        setStudy(data.study);
        setTotal(data.exam.itemCount);
        setWrong(data.wrong);
        setCollect(data.collect);
        setList(data.exemItems);
      }
    });
  }, []);

  return (
    <div>
      <div className="tap">
        <div className="subject">{title}</div>
        <div className="switch">
          <span> 切换考试科目</span>
          <span>
            <ArrowRightIcon></ArrowRightIcon>
          </span>
        </div>
      </div>
      <div className="wrap">
        <div className="top">欢迎Tomato来到XX学习库！</div>
        <div className="card-detail">
          <div className="avactive">
            <img src={avactive} alt="" />
          </div>
          <div className="detail">
            <div className="top">
              <span>已学{study}题</span>
              <span>|</span>
              <span>共{total}题</span>
            </div>
            <div className="bottom">
              <div>
                <div style={{ fontSize: "32px", color: "#FFC837" }}>
                  {wrong}
                </div>
                <div>错题</div>
              </div>
              <div>
                <div style={{ fontSize: "32px", color: "#FFC837" }}>
                  {collect}
                </div>
                <div>收藏</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="subject-title">
        <div>
          <img src={subject1} alt="" />
        </div>
        <div>
          <img src={subject2} alt="" />
        </div>
        <div>
          <img src={subject3} alt="" />
        </div>
      </div>
      <div className="tip-title">
        <span style={{ fontSize: "22px", fontWeight: "700" }}>学科题库</span>
        <span>坚持每一天，成长看得见</span>
      </div>
      <div className="list">
        {list.map((el) => (
          <List key={el.id} data={el} />
        ))}
      </div>
    </div>
  );
}
